import IconFont from '@/pages/editor/flow/common/IconFont';
import { Popconfirm } from 'antd';
import React, { useState, useEffect } from 'react'


const DrConfigPanel: React.FC = (data: any) => {
  const { schema, addons } = data;
  const { formData } = addons;
  const [selectOptions, setSelectOptions] = useState<any[]>(formData?.props?.options ?? []);

  const updatePropsOptions = (event: any, index: number, propertyName: string) => {
    const currentValue = event.target.value;
    const tempOptions = [...selectOptions];
    tempOptions[index][propertyName] = currentValue;
    setSelectOptions(tempOptions);
    if (formData?.props?.options) {
      formData.props.options = tempOptions;
    }
  }

  const labelChange = (event: any, index: number) => {
    updatePropsOptions(event, index, "label");
  }

  const valueChange = (event: any, index: number) => {
    updatePropsOptions(event, index, "value");
  }

  const removeOption = (index: number) => {
    const tempOptions = [...selectOptions];
    tempOptions.splice(index, 1);
    setSelectOptions(tempOptions);
    if (formData?.props?.options) {
      formData.props.options = tempOptions;
    }
  }

  const showOptions = () => {
    const result: any[] = [];
    selectOptions.forEach((item: any, index: number) => {
      result.push(
        <div key={item.value} style={{ display: 'flex' }}>
          <div className="fr-field  flex fr-field-object">
            <div className="fr-content fr-content-inline">
              <div className="fr-item-wrapper">
                <div className="w-100">
                  <div className="flex flex-wrap">
                    <div className="fr-field  flex fr-field-object">
                      <div className="fr-content fr-content-inline">
                        <div className="fr-item-wrapper">
                          <div className="w-100">
                            <div className="flex flex-wrap">
                              <div className="fr-field  flex frg-options-input fr-field-inline ">
                                <div className="" style={{ marginTop: '5px', paddingLeft: '12px' }} />
                                <div className="fr-content fr-content-inline">
                                  <div className="fr-item-wrapper">
                                    <input onChange={(e) => { labelChange(e, index) }} placeholder="字段" className="ant-input" type="text" value={item.label} />
                                  </div>
                                  <div className="field-block" />
                                </div>
                              </div>

                              <div className="fr-field  flex frg-options-input fr-field-inline ">
                                <div className="" style={{ marginTop: '5px', paddingLeft: '12px' }} />
                                <div className="fr-content fr-content-inline">
                                  <div className="fr-item-wrapper">
                                    <input onChange={(e) => valueChange(e, index)} placeholder="名称" className="ant-input" type="text" value={item.value} />
                                  </div>
                                  <div className="field-block" />
                                </div>
                              </div>

                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div style={{ marginTop: "6px" }}>
            <Popconfirm
              title="您确定审核么？"
              onConfirm={() => removeOption(index)}
              okText="确认"
              cancelText="取消">
              <span role="img" aria-label="delete" className="anticon anticon-delete" style={{ fontSize: "17px", marginLeft: "8px", cursor: "pointer" }}>
                <IconFont type={'icon-delete'} />
              </span>
            </Popconfirm>
          </div>
        </div>)
    })

    return result;
  }

  const addOption = () => {
    const initialOptions: any[] = [...selectOptions];
    initialOptions.push({ value: '', label: '' });
    setSelectOptions(initialOptions);
  }

  useEffect(() => {

  }, [selectOptions.length])

  return (
    <div className='fr-field w-100 flex frg-options-list fr-field-column'>
      <div className="fr-content">
        <div className="fr-item-wrapper">
          <div className="w-100">
            <div className="fr-list-1">
              {showOptions()}

              <div style={{ marginTop: 0 }}>
                <button onClick={() => {
                  addOption()
                }} type='button' className='ant-btn ant-btn-dashed'>
                  <span>{schema.buttonContent}</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>)
}


export default DrConfigPanel;
